<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>5.1.2-理解 Proxy 和 Reflect</title>
</head>

<body>
    <div id="container"></div>
</body>
<script>
    /**
     * Reflect 是一个全局对象，其下有许多方法
     * - Reflect 下的方法与 Proxy 的拦截器方法名字相同
     * - 任何在 Proxy 的拦截器中能够找到的方法，都能够在 Reflect 中找到同名函数
     * - Reflect.get 函数还能接收第三个参数，
     *    即指定接收者 receiver，可以把它理解为函数调用过程中的 this
     * - Reflect.* 方法还有很多其他方面的意义，
     *    但这里我们只关心并讨论这一点，因为它与响应式数据的实现密切相关
    */



    /**
     * Reflect.get
     * - 它的功能就是提供了访问一个对象属性的默认行为，例如下面两个操作是等价的
     * */ 
    const obj = { foo: 1 }
    // 直接读取
    console.log(obj.foo) // 1
    // 使用 Reflect.get 读取
    console.log(Reflect.get(obj, 'foo')) // 1

    /**
     * 指定接收者 receiver
     * 
     * 输出的是 2 而不是 1
     * */
    const obj3 = { foo: 1, get bar() { return this.foo; }}
    console.log(Reflect.get(obj3, 'bar', { foo: 2 }))  // 输出的是 2 而不是 1

   

</script>

</html>